﻿@page "/CanvasMultiRectScale"

@using System.Diagnostics.CodeAnalysis
@using System.Drawing;
@using System.Reflection

@inject IJSRuntime jsRuntime


<style>
    #imageContainer {
        position: relative;
        width: 600px; /* 根据需要设置 */
        height: 400px; /* 根据需要设置 */
        overflow: hidden;
    }

        #imageContainer img {
            display: block;
        }

        #imageContainer svg {
            position: absolute;
            top: 0;
            left: 0;
        }

    #myCanvas {
        z-index: 1; /* 确保 canvas 在 img 之上 */
        position: absolute; /* 或者 relative, fixed, sticky */
    }




    .ruler-container {
        position: relative;
        width: 600px;
        height: 400px;
        border: 1px solid #ccc;
        overflow: visible; /* 确保刻度可以显示在容器外 */
    }

    .ruler-horizontal {
        position: absolute;
        bottom: -40px; /* 刻度显示在容器下方 */
        width: 100%;
        height: 40px; /* 为刻度和标签留出空间 */
        background-color: transparent;
    }

    .ruler-vertical {
        position: absolute;
        left: 100%; /* 刻度显示在容器右侧 */
        top: 0;
        width: 40px; /* 为刻度和标签留出空间 */
        height: 100%;
        background-color: transparent;
    }

    .tick {
        position: absolute;
        background-color: #000;
    }

    .ruler-horizontal .tick {
        width: 2px;
        height: 10px;
    }

    .ruler-vertical .tick {
        width: 10px;
        height: 2px;
    }

    .ruler-horizontal span,
    .ruler-vertical span {
        position: absolute;
        font-size: 12px;
        color: #000;
    }

</style>

<h3>CanvasMultiRectScale</h3>

<input value="@PointJson" style="width: 600px; " />
<input @bind-value="@Width" style="width: 120px; " />
<input @bind-value="@Height" style="width: 120px; " />

<Button Text="Image" OnClick="ImageClick" />
<Button Text="Update Width/Height" OnClick="UpdateClick" />
<Button Text="Draw" OnClick="DrawClick" />
<Button Text="ClearDraw" OnClick="ClearDrawClick" />
<Button Text="DeleteDraw" OnClick="DeleteRectClick" />

<div class="ruler-container">
    <div id="divCanvas" style="position: relative; width: 600px; height: 400px;">
        <canvas id="myCanvas" width="@Width" height="@Height">
        </canvas>
        <img id="myImage" src="@imageUrl" width="@Width" height="@Height" style="position: absolute; top: 0; left: 0;" />
    </div>
    <div class="ruler-horizontal"></div>
    <div class="ruler-vertical"></div>
</div>

<script src="./ProcessDrawRect1.js"></script>

@code {

    private string imageUrl = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?0";

    private bool isMouseDown = false;

    private System.Drawing.Point? startPoint;

    private System.Drawing.Point? endPoint;

    private string PointJson = "123";

    private int Width { get; set; } = 600;

    private int Height { get; set; } = 400;

    private DotNetObjectReference<CanvasMultiRectScale> dotNetObjectReference;

    private bool isCanDraw = false;

    private bool isSelectDraw = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("import", "./ProcessDrawRect1.js");
        await jsRuntime.InvokeVoidAsync("import", "./Resizer.js");
        if (firstRender)
        {
            await jsRuntime.InvokeVoidAsync("eval", @"
        function resizeImage(elementId, width, height) {
            var img = document.getElementById(elementId);
            if (img) {
                img.style.width = width + 'px';
                img.style.height = height + 'px';
            }
        }
    ");
        }
        await jsRuntime.InvokeVoidAsync("InitBorderScale");
        
    }

    private RegionAreaInfo? SelectRect;

    [JSInvokable("MouseSelect")]
    public async Task MouseSelect(RegionAreaInfo line)
    {
        SelectRect = line;
        if (SelectRect != null)
        {
            isSelectDraw = true;
            PrintPoint();
        }
    }

    private void PrintPoint()
    {
        PointJson = System.Text.Json.JsonSerializer.Serialize(SelectRect);
        base.StateHasChanged();
    }

    private async Task DrawClick()
    {
        dotNetObjectReference = DotNetObjectReference.Create(this);
        await jsRuntime.InvokeVoidAsync("initCanvas", dotNetObjectReference, "myCanvas", true);
    }

    private async Task ClearDrawClick()
    {
        isCanDraw = false;
        await jsRuntime.InvokeVoidAsync("clearCanvasRect");
    }

    private async Task DeleteRectClick()
    {
        await jsRuntime.InvokeVoidAsync("deleteDraw", SelectRect?.Index);
    }

    private async Task UpdateClick()
    {
        await jsRuntime.InvokeVoidAsync("resizeImage", "divCanvas", Width, Height);
    }

    private async Task ImageClick()
    {
        await jsRuntime.InvokeVoidAsync("ImageCanvas", "myCanvas", imageUrl, 600, 600);
    }
}
